<template>
	<view class="user-profile-container mt10">
		<cu-custom :bgImage="bgImg" :isBack="false">
			<view slot="content">我的</view>
		</cu-custom>
		<view class="user-profile">
			<view class="user-avatar-box row-start">
				<image class="user-avatar" :src="userInfo.avatar != ''? userInfo.avatar : '/static/avatar.png'" @click="handleUser">
				</image>
				<view class="row-between flex1" v-if="isLogin">
					<view class="ml30 text-name">
						<view class="">
							{{ userInfo.nickname }}
						</view>
						<view> ID:{{ userInfo.uid }} </view>
					</view>
					<u-icon name="arrow-right" @click="handleUser" />
				</view>
				<view v-else @tap="goLogin" class="ml30 text-name">
					<view style="font-size: 42rpx">点击登录</view>
					<view class="sm">登录体验更多功能</view>
				</view>
			</view>
			<view class="bg-white row justify-around padding-bottom ">
				<view class="column column-center" @tap="openOtherPage('/pages_subpackage/history/history')"><text class="text-xxl">{{userInfo.historyNum}}</text><text class="text-gray">识别历史</text></view>
				<!-- <view class="column column-center" @tap="openOtherPage('/pages_subpackage/history/history')"><text class="text-xxl">1</text><text class="text-gray">猫猫狗狗</text></view> -->
				<view class="column column-center" @tap="openOtherPage('/pages_subpackage/collect/collect')"><text class="text-xxl">{{userInfo.favoriteNum}}</text><text class="text-gray">我的收藏</text></view>
				<!-- <view class="column column-center" @tap="openOtherPage('/pages_subpackage/myOrder/myOrder')"><text class="text-xxl">1</text><text class="text-gray">我的订单</text></view> -->
			</view>
			<!-- <view class="row row-around  cat_border" >
				<view>我的积分：<text class="text-bold text-lg">{{userInfo.integral}}</text></text></view>
				<u-button shape="circle" size="medium" @click="showPay=true;">获取积分</u-button>
			</view> -->
			<view class="row-info row-between bdb-line mt10" @click="goPage('/pages_subpackage/integral_history/integral_history')">
				<view class="label md">我的积分</view>
				<view class="flex">
					<view class="margin-right text-lg">{{userInfo.integral}}</view>
					<u-icon name="arrow-right" />
				</view>
			</view>
			<view class="row-info row-between bdb-line mt10" @click="goPage('/pages_subpackage/myPet/myPet')">
				<view class="label md">我的宠物</view>
				<u-icon name="arrow-right" />
			</view>

			<view class="row-info row-between bdb-line mt10">
				<view class="label md">联系客服</view>
				<view>
					<u-button open-type="contact" shape="circle" size="medium">点击联系</u-button>
				</view>
			</view>
			<view class="row-info row-between bdb-line" @click="goPage('/pages_subpackage/privacyExplan/privacyExplan')">
				<view class="label md">服务与隐私</view>
				<u-icon name="arrow-right" />
			</view>
		</view>
		<u-popup v-model="show" mode="bottom" border-radius="14" :mask-close-able="false" :closeable="true">
			<view class="margin" style="margin-top: 80rpx;">
				<view style="line-height: 44rpx;">为了更好的给您提供如识别历史记录查询、宠物病症统计分析等服务，<text class="text-blue">保证您的信息安全，需要您先进行手机授权登录！</text></view>
				<view class="full-width row-center">
					<u-checkbox-group style="width:40rpx">
						<u-checkbox v-model="isGree"></u-checkbox>
					</u-checkbox-group>
					<view>
						<text>我已阅读并同意</text>
						<text class="text-sm text-blue">《乐言配服务协议》</text>
					</view>
				</view>
				<view class="full-width row-center text-sm text-blue">
					<text>《乐言配个人信息收集说明》</text>
					<text>《乐言配隐私协议》</text>
				</view>
				<view class="row-around margin-top-lg">
					<u-button shape="circle" size="medium" @click="show=false">取消</u-button>
					<u-button shape="circle" type="primary" size="medium" open-type="getPhoneNumber" @getphonenumber="decryptPhoneNumber">手机号登录</u-button>
				</view>
			</view>
		</u-popup>
		<u-popup v-model="showBindPhone" mode="bottom" border-radius="14">
			<view class="margin">
				<view style="line-height: 50rpx;">
					<view class="text-bold text-lg">申请获取并验证你的手机号</view>
					<view class="text-sm text-gray">记录您的个人订单和资料信息</view>
				</view>
				<view class="shadow radius margin  light bg-cyan column-center" style="height: 130rpx;" @tap="toBindPhone">
					<view class="text-bold">{{phoneNumber}}</view>
					<view class="text-sm ">微信绑定号码</view>
				</view>
				<view class="shadow radius margin  light bg-grey column-center" style="height: 130rpx;" @tap="showBindPhone=false">
					<view class="text-bold">不允许</view>
				</view>
				<view class="row-center full-width margin-top-lg">
					<text class="text-bold  text-cyan">使用其他号码</text>
				</view>
			</view>
		</u-popup>
		
	</view>
</template>

<script>
	import {
		loginController
	} from '@/utils/login.js';
	import {
		mapGetters,
		mapActions
	} from 'vuex';
	export default {
		data() {
			return {
				text: '一键授权登录',
				showLogin: true,
				bgImg: 'https://jiaoguanyi008.oss-cn-shenzhen.aliyuncs.com/miniPro/images/imgs/customBg.jpg',
				show: false,
				isGree: false,
				showBindPhone: false,
				phoneNumber: '',
			};
		},
		onShow() {
			this.getUser()
		},
		onShareAppMessage() {
			return {
				title: '宠症智识',
				path: '/pages/science/science',
				imageUrl: '/static/share.png',
				success: async (res) => {
					// 用户点击分享到聊天界面后触发
					console.log('分享成功', res);
				},
				fail: (err) => {
					console.error('分享失败', err);
				}
			}
		},
		methods: {
			...mapActions(['getUser']),
			goLogin() {
				if (this.isLogin) {
					console.log("已经登录了 跳转到个人信息页面")
					return
				}
				uni.navigateTo({
					url: '/pages/login/login'
				})
			},
			goPage(url) {
				if (!this.isLogin) {
					uni.navigateTo({
						url: '/pages/login/login'
					})
				}
				uni.navigateTo({
					url
				})
			},
			handleUser() {
				uni.navigateTo({
					url: '/pages_subpackage/userSet/userSet'
				})
			},
			goResult() {
				uni.navigateTo({
					url: '/pages_subpackage/result/result?_id=' + 123
				})
			},
			openOtherPage(url) {
				if (this.$u.test.isEmpty(this.userInfo.phone)) {
					this.show = true
				} else {
					uni.navigateTo({
						url: url
					})
				}
			},
			async decryptPhoneNumber(e) {
				if (!this.isGree) {
					this.$toast({
						title: '请先阅读并同意协议'
					})
				} else {
					const { result: { code, msg, data } } = await wx.cloud.callFunction({ name: 'user', data: { $url: 'getPhoneNumber', encryptedData: e.detail.encryptedData, iv: e.detail.iv } })
					if (code == 200) {
						this.show = false
						this.showBindPhone = true
						this.phoneNumber = data
					} else {
						console.log(msg)
					}
				}
			},
			async toBindPhone() {
				const { result: { code, msg, data } } = await wx.cloud.callFunction({ name: 'user', data: { $url: 'update', updateId: this.userInfo._id, updateData: { phone: this.phoneNumber } } })
				if (code == 200) {
					this.$toast({
						title: '绑定成功'
					})
					this.showBindPhone = false
					this.getUser()
				} else {
					console.log("绑定失败")
				}
			},
			async handleShareSuccess() {
				const { result: { code, msg, data } } = await wx.cloud.callFunction({ name: 'user', data: { $url: 'toShare' } })
				if (code == 200) {
					this.$toast({
						title: '分享成功,增加次数'
					})
					this.getUser()
				} else {
					this.$toast({
						title: '分享失败'
					})
				}
			},
			
		},
		computed: {
			...mapGetters(['userInfo', 'isLogin'])
		}
	}
</script>

<style lang="scss">
	.user-profile-container {
		.user-profile {
			border-top-left-radius: 28rpx;
			border-top-right-radius: 28rpx;

			.user-avatar-box {
				padding: 30rpx 20rpx;
				background-color: white;
				border-top-left-radius: 28rpx;
				border-top-right-radius: 28rpx;

				.user-avatar {
					width: 120rpx;
					height: 120rpx;
					border-radius: 50%;
				}
			}

			.row-info {
				padding: 30rpx 20rpx;
				background-color: white;

				.label {
					width: 180rpx;
				}
			}

			.bdb-line {
				border-bottom: 1rpx solid #e5e5e5;
			}
		}
	}

	.text-name {
		display: flex;
		flex-direction: column;

		justify-content: space-around;
	}

	.cat_border {
		height: 128rpx;
		// border-bottom-left-radius: 28rpx; 
		// border-bottom-right-radius: 28rpx;
	}
</style>